

let colorArr = ['#ff4f4f', '#f87dd7', '#b89ce7', '#c19068', '#F5EC60', '#9CB3F4', '#B0ED83', '#8FE6C2', '#FFAD88']

	const chartOpt = {
		legend: {
			show: false,
			data: []
		},
		grid: {
			show: false,
			height: 140,
			top: '4%',
			left: '8%',
			right: '8%',
			containLabel: true,
			borderColor: '#e2e1e1'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
				onZero: false,
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisLabel: {
				interval: 0,
				textStyle: {
					color: '#89888a',
					fontSize: 11
				},
				rotate: 90
			},
			splitLine: {
				show: true,
				interval: 0,
				lineStyle: {
					color: '#f1f1f1'
				}
			},
			data: []
		},
		yAxis: {
			type: 'value',
			boundaryGap: ['0', '10%'],
			axisLine: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			// minInterval: 0,
			axisTick: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisLabel: {
				textStyle: {
					color: '#89888a',
					fontSize: 12
				},
				formatter: (val, idx) => {
					return val > 0 ? `+${val}%` : `${val}%`
				}
			},
			splitLine: {
				show: true,
				interval: 10,
				lineStyle: {
					color: '#f1f1f1'
				}
			}
		},
		series: []
	}

new Vue({
	el: '#home',
	data: {
			init: true,
			colorArr: colorArr,
			legendSelected: {},
			seriesArr: [],
			nameArr: [],
			beginTime: '',
			endTime: '',
			attendPerson: ''
	},
	mounted: function () {
		this.initChart ()
		this.fetchData()
		this.getShareData()
	},
	destroyed: function () {
		myChart.dispose()
	},
	computed: {
		footerHeight: function () {
			return {
				height: window.innerWidth / 748 * 222
			}
		}
	},
	methods: {
		initChart: function () {
			this.chart = echarts.init(this.$refs.chart)
		},
		updateOpt: function (xAxisData, seriesData) {
			this.seriesArr = []
			this.nameArr = []
			for(let i = 0; i < seriesData.length; i++) {
				let obj = {}
				obj.name = seriesData[i].name
				obj.type = 'line'
				obj.data = seriesData[i].data
				obj.smooth = true
				if(seriesData[i].data.length === 1) {
					obj.showSymbol = true
					obj.itemStyle = {
						normal: {
							color: colorArr[i],
							borderColor: colorArr[i]
						}
					}
				} else {
					obj.showSymbol = false
				}

				obj.lineStyle = {
					normal: {
						color: colorArr[i],
						width: 1.2
					}
				}
				if(i === 0) {
					obj.areaStyle = {
						normal: {
							color: '#dde8ea',
							opacity: 0.3
						}
					}
				}
				this.nameArr.push(seriesData[i].name)
				this.seriesArr.push(obj)
			}
			chartOpt.legend.data = this.nameArr
			chartOpt.xAxis.data = xAxisData
			chartOpt.series = this.seriesArr
			this.chart.setOption(chartOpt)
			this.chart.on('legendselectchanged', (params) => {
				this.legendSelected = params.selected
				this.init = false
			})
			for(let i in this.nameArr) {
				this.legendSelected[this.nameArr[i]] = true
			}
		},
		toggleLegend: function (idx) {
			this.chart.dispatchAction({
				type: 'legendToggleSelect',
				name: this.nameArr[idx]
			})
		},
		cpuLegendDotStyle: function (idx) {
			return {
				border: `1px solid ${this.colorArr[idx]}`,
				background: this.legendSelected[this.nameArr[idx]] === true ? this.colorArr[idx] : '#fff'
			}
		},
		cpuLegendTextStyle: function (idx) {
			return {
				opacity: this.legendSelected[this.nameArr[idx]] === true ? 1 : 0.3
			}
		},
		filterTime: function (date, format) {
			let result = ''
			if (date) {
				let year = ''
				let month = ''
				let day = ''
				switch(format) {
					case 'MM月DD日':
						month = date.slice(4, 6)
						day = date.slice(6, 8)
						result = `${month}月${day}日`
						break
					case 'YYYY.MM.DD':
						year = date.slice(0, 4)
						month = date.slice(4, 6)
						day = date.slice(6, 8)
						result = `${year}.${month}.${day}`
						break
					default:
						month = date.slice(4, 6)
						day = date.slice(6, 8)
						result = `${month}月${day}日`
						break
				}
			}
			return result
		},

		fetchData: function () {
      		var apiAddress = this.getUrlParam('url')
			var _this = this
			$.ajax({
				methods: 'GET',
				url: apiAddress,
				dataType: 'JSONP',
				jsonpCallback: 'niurenshare',
				success: resp => {
					console.log(resp);
					const { chartData, chartDateArr, gameDetail } = resp
					_this.beginTime = gameDetail.BEGIN_DATE
					_this.endTime = gameDetail.END_DATE
					_this.attendPerson = gameDetail.GAME_ATTEND_PERSON
					this.updateOpt(chartDateArr, chartData)
				},
				error: err => {
					console.error(err)
				}
			})
		},

		getShareData: function () {
			var title = this.getUrlParam('title')
			var content = this.getUrlParam('content')
			var icon = 'https://dl.app.gtja.com/nrng/shareimages/niuniu.jpg'
			window.weixinShare(title, content, icon, window.location.href)
		},

		download: function () {
			var userCode = this.getUrlParam('userCode')
			var activitycode = this.getUrlParam('activitycode')
			var shareId = this.getUrlParam('shareId')
			
			if (activitycode !== "" && typeof(activitycode) !== 'undefined') {
				window.location.href = 'https://fy.gtja.com/m/app/nrng/register.jsp?userCode=' + userCode + '&activityCode=' + activitycode + '&shareId=' + shareId
			} else if (userCode !== '' && typeof(userCode) !== 'undefined') {
				window.location.href = 'https://dl.app.gtja.com/nrng/share/share.register.html?userCode=' + userCode
			} else {
				window.location.href = 'https://yyz.gtja.com/dl?cid=yyz'
			}
		},

		getUrlParam: function (name) {
			let url = decodeURI(location.search)
			// let url = decodeURI('?userCode=19117189&url=https://dl.app.gtja.com/operation/config/niurenniugu/share1/2017/09/14/19117189/201709140933/teamgame.gamedetail.json&title=%E7%89%9B%E4%BA%BA%E7%89%9B%E8%82%A1%E5%9B%A2%E9%98%9F%E8%B5%9B%E5%BC%80%E5%A7%8B%E5%95%A6&content=%E6%9C%AC%E7%8E%8B%E6%AD%A3%E5%9C%A8%E5%8F%82%E5%8A%A0%E8%BF%99%E5%9C%BA9%E6%9C%8812%E6%97%A5%E5%9B%A2%E9%98%9F%E8%B5%9BT,%20%E7%9B%AE%E5%89%8D9%E6%9C%8812%E6%97%A5%E5%9B%A2%E9%98%9F%E8%B5%9BT4%E5%9B%A2%E9%98%9F%E6%94%B6%E7%9B%8A%E6%9C%80%E9%AB%98%EF%BC%8C%E4%BD%A0%E4%B9%9F%E5%BF%AB%E6%9D%A5%E5%8A%A0%E5%85%A5%E5%90%A7%EF%BC%81&shareid=undefined&activitycode=201611_NRNG&isyyzshare=1')
			let theRequest = new Object()
			if (Number(url.indexOf('?')) !== -1) {
				let str = url.substr(1)
				let strs = str.split('&')
				for (let i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
				}
			}
			return theRequest[name]
		}
	}
})
